<template>
	<view class="container">
		<!-- 宿舍信息展示 -->
		<view v-if="show" class="dorm-info">
			<view class="info-item">我的宿舍</view>
			<view class="info-item">宿舍编号: {{ dormInfo.SS_MC }}</view>
			<view class="info-item">楼栋: {{ dormInfo.buildingName }}</view>
			<view class="info-item">楼层: {{ dormInfo.floorName }}</view>
			<view class="info-item">房间号: {{ dormInfo.number }}</view>
			<view class="info-item">可住人数: {{ dormInfo.peopleNum }}</view>
			<view class="info-item">当前状态: {{ dormInfo.status === 1 ? '可用' : '不可用' }}</view>
			<button type="primary" @click="handleUnbind">退租</button>
		</view>

		<!-- 宿舍选择器 -->
		<view v-else class="choice">
			<view class="choice-box">
				<view class="choice-item">
					<picker mode="selector" :range="roomTypes" @change="onPickerChange('roomType', $event)" :disabled="loading">
						<view>选择房间类别: {{ selectedRoomType }}</view>
					</picker>
				</view>
				<view class="choice-item">
					<picker mode="selector" :range="buildingList.map(item => item.name)" @change="onPickerChange('building', $event)" :disabled="loading">
						<view>选择楼栋: {{ buildingName }}</view>
					</picker>
				</view>
				<view class="choice-item" v-if="floorList.length > 0">
					<picker mode="selector" :range="floorList.map(item => `第${item.layer}层`)" @change="onPickerChange('floor', $event)" :disabled="loading">
						<view>选择楼层: {{ floorName }}</view>
					</picker>
				</view>
				<view class="choice-item" v-if="roomList.length > 0">
					<picker mode="selector" :range="roomList.map(item => item.SS_MC)" @change="onPickerChange('room', $event)" :disabled="loading">
						<view>选择房间号: {{ roomName }}</view>
					</picker>
				</view>
			</view>

			<!-- 确认按钮 -->
			<button type="primary" @click="handleConfirm" :disabled="!roomName || !selectedRoomType || loading">
				{{ loading ? '加载中...' : '确认' }}
			</button>
		</view>
	</view>
</template>

<script>
	import { ajax } from '../../utils/request';

	export default {
		data() {
			return {
				SS_MC: '', // 宿舍号
				show: false, // 是否展示宿舍信息
				dormInfo: {}, // 宿舍详细信息
				buildingList: [], // 楼栋列表
				floorList: [], // 楼层列表
				roomList: [], // 房间号列表
				allFloors: [], // 所有楼层数据
				allRooms: [], // 所有房间数据
				buildingName: '请选择楼栋',
				floorName: '请选择楼层',
				roomName: '请选择房间号',
				selectedBuildingId: null,
				selectedFloorId: null,
				selectedRoomId: null,
				loading: true, // 数据加载状态
				roomTypes: ['单间', '双人间', '一房一厅', '二房一厅', '三房一厅'], // 房间类别
				selectedRoomType: '单间', // 默认选择的房间类别
			};
		},
		onLoad() {
			this.getSS_MC();
			this.fetchBindInfo(); // 获取楼栋、楼层、房间列表
		},
		methods: {
			// 获取宿舍信息
			getSS_MC() {
				const userInfo = uni.getStorageSync('userInfo') || {};
				this.SS_MC = userInfo.ss_mc || '';
				if (this.SS_MC === '') {
					this.show = false;
					uni.showToast({
						title: '请先选择宿舍',
						icon: 'none',
					});
				} else {
					this.show = true;
					this.fetchDormInfo();
				}
			},
			// 模拟获取宿舍详细信息
			fetchDormInfo() {
				this.dormInfo = {
					SS_MC: "12-101",
					buildingName: "12号楼",
					floorName: "1层",
					number: "101",
					peopleNum: 6,
					status: 1, // 1: 可用, 0: 不可用
				};
			},
			// 获取楼栋、楼层、房间信息
			async fetchBindInfo() {
				try {
					this.loading = true;
					const res = await ajax('/api/meter/bindinfo', 'POST');
					if (res.success) {
						const data = res.data;
						this.buildingList = data.builds || [];
						this.allFloors = data.foorls || [];
						this.allRooms = data.rooms || [];
					} else {
						uni.showToast({
							title: '获取宿舍信息失败',
							icon: 'none',
						});
					}
				} catch (error) {
					console.error('获取楼栋信息失败:', error);
					uni.showToast({
						title: '网络异常，请稍后再试',
						icon: 'none',
					});
				} finally {
					this.loading = false;
				}
			},
			// 统一处理选择器变化
			onPickerChange(type, e) {
				if (this.loading) {
					uni.showToast({
						title: '正在加载数据，请稍后',
						icon: 'none',
					});
					return;
				}
				const index = e.detail.value;
				switch (type) {
					case 'roomType':
						this.selectedRoomType = this.roomTypes[index];
						break;
					case 'building':
						this.selectedBuildingId = this.buildingList[index].id;
						this.buildingName = this.buildingList[index].name;
						this.floorList = this.allFloors.filter(floor => floor.buildingId === this.selectedBuildingId);
						this.floorName = '请选择楼层';
						this.roomList = [];
						this.roomName = '请选择房间号';
						break;
					case 'floor':
						this.selectedFloorId = this.floorList[index].id;
						this.floorName = `第${this.floorList[index].layer}层`;
						this.roomList = this.allRooms.filter(room => room.floorId === this.selectedFloorId);
						this.roomName = '请选择房间号';
						break;
					case 'room':
						this.selectedRoomId = this.roomList[index].id;
						this.roomName = this.roomList[index].SS_MC;
						break;
				}
			},
			// 确认并跳转
			handleConfirm() {
				if (!this.roomName || !this.selectedRoomType) {
					uni.showToast({
						title: '请先选择房间号和房间类型',
						icon: 'none',
					});
					return;
				}

				// 存储房间类别和房间号到本地
				uni.setStorageSync('selectedRoomInfo', {
					roomType: this.selectedRoomType,
					roomName: this.roomName,
				});

				// 跳转到下一个页面
				// uni.switchTab({
				// 	url: '/pages/index/index',
				// });
				uni.navigateTo({
					url: '/myDormitory/furniture/furniture',
				})
			},
			// 退租
			handleUnbind() {
				uni.showModal({
					title: '提示',
					content: '确定要退租吗？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('userInfo');
							this.show = false;
							this.SS_MC = '';
							uni.showToast({
								title: '退租成功',
								icon: 'success',
							});
						}
					}
				});
			},
		},
	};
</script>

<style scoped>
	:root {
		--primary-color: #007AFF;
		--disabled-color: #ccc;
		--border-color: #ddd;
		--background-color: #f9f9f9;
		--shadow-color: #ccc;
	}

	.container {
		padding: 20px;
	}

	.dorm-info, .result-item {
		margin: 20px 0;
		padding: 15px;
		border: 1px solid var(--border-color);
		border-radius: 8px;
		background-color: var(--background-color);
	}

	.info-item {
		margin: 5px 0;
	}

	.choice-item {
		background-color: #fff;
		padding: 20rpx 80rpx;
		border-radius: 15rpx;
		box-shadow: 0 0 10rpx var(--shadow-color);
		margin: 10px 0;
	}

	.choice {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	button[disabled] {
		background-color: var(--disabled-color);
		color: #666;
	}
</style>